import { useMessage } from '@/hooks'
import { bwSortableUtil } from '@/utils/drag'
import { useComDesignStoreWithOut, designUtils } from '@/store'
import { ref, unref, nextTick, watch } from 'vue'

import {
  BwComTypeEnum,
  BwAntComNameEnum,
  BwHtmlComNameEnum,
} from '@bitwit/base-com-render'

// @ts-ignore 组件工具
export function useComGroup(props, emit) {
  const designStore = useComDesignStoreWithOut()
  const { createErrorModal } = useMessage()

  const comGroup = ref()
  const initSortable = () => {
    const ele = unref(comGroup)
    if (ele) {
      bwSortableUtil(ele, {
        sort: false,
        animation: 100,
        isHoverBubble: true,
        filter: '.com-ignore-item',
        draggable: '.bw-design-drag-item',
        group: { name: 'drag-group', pull: 'clone', put: false },
        receivClass: props.receivClass,
        onDragEnd: (dragInfo) => {
          const { from, to, related, dragged, position } = dragInfo

          if (from === to) {
            return undefined
          } else if (from && to && related && dragged) {
            const nodeId = to.getAttribute('nodeId') ?? ''
            const slotCode = to.getAttribute('soltCode') ?? ''
            const toNodeType = to.getAttribute('data-nodetype') ?? ''
            const comName = dragged.getAttribute('comName') ?? ''
            const comType = dragged.getAttribute('comType') ?? ''
            const appId = dragged.getAttribute('appId')
            const appCode = dragged.getAttribute('appCode')
            const comCode = (dragged.getAttribute('comCode') ?? '') as
              | BwAntComNameEnum
              | BwHtmlComNameEnum

            if (comCode && comName) {
              /** 判断是否在容器组件上 */
              if (related === to) {
                designStore.onDragAddNodeEle({
                  toNodeType,
                  newIndex: 0,
                  toNodeId: nodeId,
                  toNodeSlotCode: slotCode,
                  dragComCode: comCode,
                  dragComName: comName,
                  dragComAppCode: appCode ?? appId ?? null,
                  dragComType: comType as BwComTypeEnum,
                })
              } else {
                const structs = designStore.getStructList
                const rNodeId = related.getAttribute('nodeId') ?? ''
                const nodeInfo = designUtils.findDomNodeInfo(structs, rNodeId)

                let newIndex = 0
                if (nodeInfo) {
                  newIndex = nodeInfo?.index ?? 0
                  if (position === 'bottom') {
                    newIndex += 1
                  }
                }

                designStore.onDragAddNodeEle({
                  newIndex,
                  toNodeType,
                  toNodeId: nodeId,
                  toNodeSlotCode: slotCode,
                  dragComCode: comCode,
                  dragComName: comName,
                  dragComAppCode: appCode ?? appId ?? null,
                  dragComType: comType as BwComTypeEnum,
                })
              }
            } else {
              createErrorModal({ content: `无法获取拖拽的元素，请检查！` })
            }
          }
        },
      })
    }
  }

  watch(
    () => props.comList,
    () => {
      nextTick(() => initSortable())
    },
    { deep: true, immediate: true }
  )

  return { comGroup, initSortable }
}
